<template>
<section class="radar-out">
    <div class="radarWrap" ref="radarWrap">
            <div class="searchLabel" ref="searchBox">
              <h2>热门标签</h2>
              <div class="labels">
                <myLabel v-if="tagShowHot" v-for="(item,keys) in tagShowHot" :index="keys" :closeIcon="false" @removetag="addHotTag(item)">{{item.Tally}}</myLabel>
              </div>
              <h2>添加你想搜索的标签（最多6个）</h2>
              <div class="labels">
                <myLabel v-if="tagShowArr" v-for="(item,keys) in tagShowArr" :index="keys" :closeIcon="true" @removetag="deleteTag(keys)">{{item.name}}</myLabel>
                <span v-if="tagShowArr.length<6" @click="useWrap('searchVisible', true)" class="addLabel">添加标签+</span>
              </div>
              <h2>筛选结果：</h2>
              <div class="imgData_0308" :class="{autoHeight:radarResult}">
                <section v-if="!radarResult" class="filterWrap_0315">
                  <div class="filterIcon_0316"></div>
                  <p class="filterText_0315">暂无结果</p>
                </section>
                <section v-if="radarResult" class="section_0308">
                  <div class="div_0308" style="position: relative">
                    <div v-for="(subItem,ins) in radarResult" :class="'trapezoid trapezoid'+ (ins+1)">
                      <span class="span_0308 text_0308">匹配度{{subItem.MatchingRate}}%</span>
                      <span class="span_0308 number_0308">{{subItem.Count}}</span>
                    </div>
                    <div class="rangeWrap_0308">
                      <input type="range" class="range_0308" :class="arrWidth[radarResult.length-1]" min="0" :max="radarResult.length-1" step="1" v-model="iNow" @touchstart="rangeStart" @touchend="rangeEnd">
                    </div>
                    <div class="wrap2">
                      <div class="myWrap" :class="arrWidth[iNow]"></div>
                    </div>
                  </div>
                </section>
              </div>
              <myButton class="marginB_10" @sendDate="showList()">开始搜索</myButton>
            </div>
            <div class="radarList_0308">
              <pull-refresh :next="refresh">
                <div slot="list">
                  <section class="list-item">
                     <div class="nearbyUL">
                        <personDate v-if="radarData" :items="radarData" @personClick="askSee"></personDate>
                        <div v-else class="radar-no">暂无结果</div>
                     </div>
                  </section>
                </div>
              </pull-refresh>
            </div>
            <!-- 标签雷达之添加标签 -->
    </div>
    <mt-popup
        v-model="popup.searchVisible"
        position="center" class="addSearch_0315">
        <div class="searchWrap2_0315">
          <h2 class="searchTitle_0316">添加标签</h2>
          <input class="searchInput_0316" type="text" v-model.trim="blurInput" placeholder="请输入您想要查找的标签关键字">
          <div v-if="blurArr" v-for="item in blurArr" class="searchItem_0316" @click="selectTally(item.TallyLibraryId)">{{item.Tally}}<i v-show="item.selected" class="selected"></i></div>
        </div>
        <div class="searchBtn_0316">
          <button @click="useWrap('searchVisible', false,'no')" class="btnL_0316">取消</button>
          <button @click="useWrap('searchVisible', false,'yes')" class="btnR_0316">确认</button>
        </div>
  </mt-popup>
</section>
</template>
<script>
import API from "../assets/js/fetchAPI";
import { fetch } from "../assets/api";
import { Popup, Toast } from "mint-ui";
import personDate from "./base/expertList";
import myLabel from "./base/myLabel";
import myButton from "./base/myButton";
import pullRefresh from "./base/pullRefresh";
import Client from "../assets/js/common";
export default {
  data() {
    return {
      iNow: 0,
      arrWidth: [
        "width_42",
        "width_85",
        "width_127",
        "width_168",
        "width_210",
        ""
      ],
      popup: {
        popupVisible: false,
        searchVisible: false
      },
      blurInput: null, //模糊搜索内容
      blurArr: null, //结果
      tagResult: null, //标签id，多个用,隔开
      tagShowArr: [], //展示搜索选中标签
      tagShowHot: [], //热门标签
      radarResult: null,
      radarData: null,
      selected: this.$route.query.index
    };
  },
  created() {
    if(this.selected&&this.selected == 2){
      this.getHotLabel();
    }
  },
  methods: {
    refresh() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          this.$refs.radarWrap.style.transform = "translate3D(0px, 0px, 0px)";
          resolve();
        }, 1600);
      });
    },
    async getHotLabel(){
      const hotTag = await fetch(API.hotLabel,{});
      this.tagShowHot = hotTag.Result;
      console.log('hotLabel',hotTag);
    },
    async showList() {
      if (!this.tagResult) {
        Toast("您还未添加标签");
        return;
      }
      let loginData = Client.getStore("login");
      let expertList = await fetch(API.ladarExpert, {
        ...loginData[0],
        PageIndex: 1,
        TallyIds: this.tagResult.toString(),
        Permutation: +this.iNow + 1
      });
      //console.log('雷达到的行家',expertList);
      this.radarData = expertList.Result.Messages;
      if(this.radarData.length>0){
        this.$refs.radarWrap.style.transform = "translate3D(0px, -50%, 0px)";
      }else{
        Toast("未搜索到对应的行家信息");
      }
    },
    useWrap(str, bool, type) {
      if (type == "yes") {
        let resArr = [], //只存ID
          resData = []; //存ID与标签名
        if (!this.blurInput&&!this.blurArr) {
          Toast("请输入您要查找的标签关键字");
          return;
        }else if(!this.blurArr){
          Toast("未搜索到相应标签");
          return;
        }
        let hasSelected = false;
        this.blurArr.forEach(item => {
          if (item.selected) {
            resArr.push(item.TallyLibraryId);
            resData.push({ id: item.TallyLibraryId, name: item.Tally });
            hasSelected = true;
          }
        });
        if(this.tagShowArr.length>0){
          if((this.tagShowArr.length + resData.length) > 6){
            Toast("最多只能添加6个搜索标签哦");
            return;
          }else{
            this.tagResult = [...this.tagResult,...resArr];
            this.tagShowArr = [...this.tagShowArr,...resData];
          }
        }else{
          if(resData > 6){
            Toast("最多只能选中6个标签");
            return;
          }
          this.tagResult = resArr;
          this.tagShowArr = resData;
        }
        if (this.tagResult && hasSelected) {
          this.blurInput = null;
          this.blurArr = null;
          let arrString = this.tagResult.toString();
          this.radarSearch(arrString);
        }else if(!hasSelected){
          Toast("请选择列表中的搜索标签");
          return;
        }
      }
      this.popup[str] = bool;
    },
    async blurSearch(data) {
      let res = await fetch(API.labelRadar, { FuzzyTally: data });
      if (res.Result) {
        res.Result.forEach(ele => {
          ele.selected = false;
        });
      }
      this.blurArr = res.Result;
      //console.log('模糊回来的数据',this.blurArr);
    },
    selectTally(id) {
      this.blurArr.forEach(item => {
        if (item.TallyLibraryId == id) {
          item.selected = !item.selected;
        }
      });
    },
    addHotTag(item){
      if(!this.tagResult){
        this.tagResult = [];
      }
      if(this.tagShowArr.length >= 6){
        Toast("最多只能添加6个搜索标签哦");
        return;
      }
      sameId:
      for(let i=0;i<this.tagResult.length;i++){
        if(this.tagResult[i] == item.TallyLibraryId){
          Toast("您已添加过该搜索标签");
          return;
        }
      }
      this.tagShowArr.push({ id: item.TallyLibraryId, name: item.Tally });
      this.tagResult.push(item.TallyLibraryId);
    },
    //移除搜索结果标签
    deleteTag(i) {
      this.tagShowArr.splice(i, 1);
      this.tagResult.splice(i, 1);
      this.iNow = 0;
      if(this.tagShowArr&&this.tagShowArr.length > 0){
        this.radarSearch(this.tagResult.toString());
      }else{
        this.radarResult = null;
        this.tagResult = null;
      }
    },
    async radarSearch(arr) {
      let res = await fetch(API.radarSearch, { TallyIds: arr });
      this.radarResult = res.Result;
      this.blurArr = null;
    },
    askSee(obj) {
      this.swiperShow = !this.swiperShow;
    },
    rangeStart(){
      this.$refs.searchBox.style.overflow = 'hidden';
    },
    rangeEnd(){
      this.$refs.searchBox.removeAttribute('style');
    }
  },
  components: {
    myLabel,
    myButton,
    pullRefresh,
    personDate
  },
  watch: {
    blurInput: function(val) {
      if (val) {
        this.blurSearch(val);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.width_42 {
  width: 0.42rem !important;
}
.width_85 {
  width: 0.85rem !important;
}
.width_127 {
  width: 1.27rem !important;
}
.width_168 {
  width: 1.68rem !important;
}
.width_210 {
  width: 2.1rem !important;
}
.nearbyUL{
  position: relative !important;
  top: 0 !important;
}
.radar-out {
  width: 100%;
  height: 100%;
  .addSearch_0315 {
    z-index: 100 !important;
    .searchWrap2_0315 {
      margin-bottom: 0.15rem;
      .searchInput_0316{
        line-height: .3rem;
      }
    }
    .searchItem_0316 {
      i.selected {
        width: 0.16rem;
        height: 0.16rem;
        background: url("../assets/img/expert/icon_yes@2x.png") center no-repeat;
        background-size: contain;
        margin-left: 0.04rem;
      }
    }
  }
  .radarWrap {
    width: 100%;
    height: 200%;
    position: absolute;
    left: 0;
    transition: ease 0.5s;
    .searchLabel {
      overflow-y: auto;
      overflow-x: hidden;
      height: 50%;
      padding: 0 0.14rem;
      h2 {
        height: 0.2rem;
        line-height: 0.2rem;
        font-size: 0.16rem;
        color: #353535;
        padding-top: 0.1rem;
        .clear {
          color: #333;
          font-weight: 400;
          float: right;
        }
      }
      .marginB_10 {
        margin-bottom: 0.5rem;
      }
      .imgData_0308 {
        padding-top: 0.1rem;
        height: 2.52rem;
        margin-bottom: 0.4rem;
        &.autoHeight{
          height:auto !important;
        }
        .filterWrap_0315 {
          .filterIcon_0316 {
            width: 2rem;
            height: 2rem;
            margin: 0 auto;
            background: url("../assets/img/expert/icon_sous@3x.png") center
              no-repeat;
            background-size: 50%;
          }
          .filterText_0315 {
            font-size: 0.17rem;
            color: #828282;
            text-align: center;
            padding-top: 0.13rem;
          }
        }

        .section_0308 {
          height: auto;
          .div_0308 {
            width: 1.62rem;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            position: relative;
            .wrap2 {
              position: absolute;
              right: 0.2rem;
              top:-.5rem;
              width: 0.1rem;
              height: 0.1rem;
              .myWrap {
                opacity: 0.3;
                transform-origin: left bottom;
                transform: rotate(90deg);
                width: 2.49rem;
                height: 0.5rem;
                background: #8eb1ff;
              }
            }
            .rangeWrap_0308 {
              transform: rotate(180deg);
              width: 10px;
              position: absolute;
              top:.09rem;
              left: 1.8rem;
              z-index: 20;
              display: block;
              -webkit-appearance: none;
              //background-color: white;
              width: 0.01rem;
              height: 0.01rem;
              border-radius: 5px;
              margin: 0 auto;
              outline: 0;
              input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                background-color: #000;
                width: 0.3rem;
                height: 0.3rem;
                border-radius: 50%;
                // border: 2px solid white;
                transition: 0.3s ease-in-out;
              }
              .range_0308 {
                transform-origin: left bottom;
                transform: rotate(-90deg);
                // box-shadow:
                // 0 1px 0 0px white,
                // 0 1px 0 white inset,
                // 0px 2px 10px 0px black inset,
                // 1px 0px 2px white inset,
                // 0 0px 1px white inset;
                margin-top: 0.02rem;
                background-color: #39393d;
                border-radius: 0.15rem;
                width: 2.52rem;
                -webkit-appearance: none;
                height: 0.03rem;
              }
              input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                top: -0.5rem;
                height: 0.4rem;
                width: 0.4rem;
                transform: translateY(-0.04rem) rotate(180deg);
                border-radius: 50%;
                box-shadow: 0 -0.01rem 0.01rem white inset;
                background: url("../assets/img/expert/icon_hand@3x.png") center
                  center;
                background-size: cover;
                background-repeat: no-repeat;
              }
            }
            .trapezoid {
              height: 0rem;
              border-left: 0.1rem solid transparent;
              position: relative;
              .span_0308 {
                position: absolute;
                z-index: 3;
                display: block;
                height: 0.22rem;
                line-height: 0.22rem;
                margin-top: -0.3rem;
              }
              .text_0308 {
                color: #39393d;
                font-size: 0.12rem;
                text-align: center;
                width: 0.8rem;
                margin-left: -0.9rem;
              }
              .number_0308 {
                color: white;
                font-size: 0.18rem;
                right: 0.2rem;
              }
            }
            .trapezoid1 {
              width: 1.52rem;
              border-top: 0.42rem solid #d8d8d8;
            }
            .trapezoid2 {
              width: 1.42rem;
              border-top: 0.42rem solid #b9b9b9;
            }
            .trapezoid3 {
              width: 1.33rem;
              border-top: 0.42rem solid #a3a3a3;
            }
            .trapezoid4 {
              width: 1.24rem;
              border-top: 0.42rem solid #828282;
            }
            .trapezoid5 {
              width: 1.14rem;
              border-top: 0.42rem solid #616161;
            }
            .trapezoid6 {
              width: 1.05rem;
              border-top: 0.42rem solid #39393d;
            }
          }
        }
      }
      .labels {
        overflow: hidden;
        padding: 0.14rem 0 0.2rem 0;
        span {
          display: block;
          height: 0.3rem;
          line-height: 0.3rem;
          float: left;
          text-align: center;
          padding: 0 0.1rem;
          margin: 0 0.14rem 0.14rem 0;
          border: 0.04rem;
          border-radius: 0.04rem;
          font-size: 0.14rem;
          &.addLabel {
            background: #828282;
            color: white;
          }
          &.label {
            background: #39393d;
            color: white;
            position: relative;
            i.icon_0308 {
              display: block;
              width: 0.18rem;
              height: 0.18rem;
              top: -0.05rem;
              right: -0.05rem;
              position: absolute;
              background: url("../assets/img/person/icon_cancel04@3x.png") center;
              background-size: cover;
              background-repeat: no-repeat;
            }
          }
          &.oldLabel {
            background: #666;
            color: white;
          }
        }
      }
    }
    .radarList_0308 {
      width: 100%;
      height: 50%;
    }
  }
}
</style>
<style>
.v-modal {
  z-index: 99 !important;
}
</style>
